<template>
  <div ref="myChart" style="height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'xmssPie',
  props: {
    types: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      myChart: undefined,
    }
  },
  created() {},
  mounted() {
    this.drawLine()
    window.addEventListener('resize', this.resize())
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)

      let color = ['#0048af', '#ee9646', '#35c0db', '#a665c1', '#8cabf8']
      let pData = this.types.length
        ? this.types
        : [
            {
              name: '60分以下',
              value: 14,
            },
            {
              name: '95分以上',
              value: 12,
            },
            {
              name: '80分以上',
              value: 28,
            },
            {
              name: '60分以上',
              value: 36,
            },
          ]
      // console.log(this.types, 'types')
      // console.log(pData, 'pData')
      let sum = pData.length && pData.reduce((sum, item) => sum + Number(item.value), 0)
      pData.push({
        name: '',
        value: sum,
        itemStyle: { color: 'rgba(0,0,0,0)' },
        label: { show: false },
      })
      // pData = pData.map(item=>item)
      myChart.setOption({
        color: color,
        grid: {
          left: '1%',
        },
        title: {
          text: '100%',
          left: 'center',
          top: '58%',
          textStyle: {
            fontSize: 16,
            color: '#1c4db0',
            fontWeight: 'normal',
          },
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '70%'],
            radius: ['48%', '85%'],
            // hoverAnimation: true,
            startAngle: 180,
            data: pData,
            label: {
              normal: {
                formatter: (params) => {
                  return '{font|' + params.name + '}\n{hr|}\n{font|' + ((params.value / sum) * 100).toFixed(2) + '%}'
                },
                rich: {
                  font: {
                    fontSize: 10,
                    padding: [5, 0],
                    color: '#838383',
                  },
                  hr: {
                    height: 0,
                    borderWidth: 1,
                    width: '100%',
                    borderColor: '#99c6fe',
                  },
                },
              },
            },
            labelLine: {
              lineStyle: {
                color: '#99c6fe',
              },
            },
          },
        ],
      })
      this.myChart = myChart
    },
    resize() {
      this.myChart.resize()
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize())
  },
}
</script>

<style scoped>
</style>